<template>
  <div>
    <!-- C端月度指标查询-->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle" :labelWidth="110"></TopFilter>

    <Spin :spinning="exportLoading" tip="Loading...">
      <FilterTable
        ref="table"
        columnsRef="wkcOmMonthlyTargetQueryC"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :onColumnsChange="(columns) => (this.columns = columns)"
        :isSelectColumn="false"
      >
        <template slot="controls" >
          <multiuse-button size="small" type="primary" :click="importDataFunc">数据导入</multiuse-button>
          <multiuse-button size="small" type="primary" :click="assignFunc">下发</multiuse-button>
          <multiuse-button size="small" type="primary" :click="deleteFunc">删除</multiuse-button>
        </template>
      </FilterTable>
    </Spin>

    <BaseDialog :visible.sync="isImport" :title="'导入月度目标'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <importFiles @close="importcloseHandler" />
    </BaseDialog>
    <BaseDialog :visible.sync="selectAssignMonthVisible" :title="'是否确认下发'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <selectAssignDate :targetSource = "targetSource" @close="dialogClosHandler" />
    </BaseDialog>

    <BaseDialog :visible.sync="deleteMonthVisible" :title="'是否确认删除'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <deleteMonthTarget :targetSource = "targetSource" @close="dialogClosHandler" />
    </BaseDialog>
  </div>
</template>
<script>
  import moment from 'moment';

  import { queryList, getSeriesList } from '@/api/omSale/salesPlan/MonthTargetQuery';
  import OwnerSearch from '../OwnerSearch';
  import { dictionary } from '@/utils/dictMixin';
  import { region } from '@/api/cms-common/region';
  import { getSaleAreaInfo } from '@/api/cms-common/dealerdata/index';
  import { dealerCommon } from '@/api/cms-api/origin/commonDealerType'; //渠道类型工具类
  import importFiles from './importFiles';
  import selectAssignDate from '../MonthTargetImport/selectAssignDate';
  import deleteMonthTarget from '../MonthTargetImport/deleteMonthTarget';

  export default {
    name: 'MonthTargetImport',
    mixins: [dictionary, region, dealerCommon],
    data() {
      this.BaseTable = null;
      return {
        topFilterList: this.createdFrom(),
        columns: this.createdTable(),
        fetchApi: queryList,
        fetchParams: {
          isDealer: 10041002,
          targetSource: 1,
          targetDate: moment().subtract(-1, 'months').format('YYYY-MM'),
        },
        formData: {},
        exportLoading: false,
        isDealer: false,
        areaList: [],
        isImport: false,
        targetSource: 1,
        selectAssignMonthVisible: false,
        deleteMonthVisible: false
      };
    },
    components: {
      OwnerSearch,
      importFiles,
      selectAssignDate,
      deleteMonthTarget
    },
    mounted() {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    created() {
      this.getAreaData();
      //初始化省份信息
      this.initProvince();
      this.getSeriesData();
    },
    methods: {
      // 删除
      deleteFunc () {
        this.deleteMonthVisible = true
      },
      // 下发
      assignFunc (){
        this.selectAssignMonthVisible = true
      },
      // 导入月度目标
      importDataFunc (){
        this.isImport = true;
      },
      // 导入完成回调方法
      importcloseHandler() {
        this.isImport = false;
        this.fetchParams = Object.assign({}, this.fetchParams);
      },
      // 下发日期选择完成回调方法
      dialogClosHandler () {
        this.selectAssignMonthVisible = false
        this.selectAssignMonthVisible = false
        this.fetchParams = Object.assign({}, this.fetchParams);
      },
      async getAreaData() {
        const res = await getSaleAreaInfo(15061016);
        if (res.resultCode === 200) {
          this.areaList = res.data;
          res.data.map((x) => {
            this.topFilterList.find((item) => item.fieldName == 'areaId').itemList.push({ text: x.orgName, value: x.id });
          });
        }
      },
      areaName(value) {
        for (let i in this.areaList) {
          if (this.areaList[i].id === value) {
            return this.areaList[i].orgName;
          }
        }
      },
      //初始化所在省份
      async initProvince() {
        let pl = this.createRegionList();
        this.topFilterList.find((item) => item.fieldName == 'provinceId').itemList = pl;
      },
      //初始化所在市数据
      async initCity(provinceId) {
        //清空市
        this.topFilterList.find((item) => item.fieldName == 'cityId').initialValue = '';
        if (!provinceId || provinceId == null || typeof provinceId == 'undefined') {
          return;
        }
        //取省数据
        let rd = this.getRegionData();
        this.cityData = rd[provinceId].children;
        let cl = this.createSubRegionList(this.cityData);
        this.topFilterList.find((item) => item.fieldName == 'cityId').itemList = cl;
      },
      async getSeriesData() {
        const res = await getSeriesList();
        if (res.resultCode === 200) {
          res.data.map((x) => {
            this.topFilterList.find((item) => item.fieldName == 'seriesId').itemList.push({ text: x.seriesName, value: x.seriesId });
          });
        }
      },
      emitCloseHandler(val, data) {
        this.isDealer = val;
        if (data) {
          let dealerCodes = [];
          let dealerNames = [];
          data.map((x) => {
            dealerCodes.push(x.dealerCode);
            dealerNames.push(x.dealerName);
          });
          this.topFilterList.find((x) => x.fieldName == 'dealerCodes').initialValue = dealerCodes.toString();
        }
      },
      changeHandle(params) {
        this.fetchParams = Object.assign({}, this.fetchParams, params);
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      // getSeriesName(val){
      //   let list=this.topFilterList.find(item => item.fieldName == 'seriesId').itemList;
      //   for(var i in list){
      //     if (list[i].value===val){
      //       return list[i].text;
      //     }}
      //   },
      createdFrom() {
        return [
          {
            type: 'DATE',
            label: '指标月份',
            fieldName: 'targetDate',
            initialValue: moment().subtract(-1, 'months').format('YYYY-MM'),
            dateType: 'month',
            clearable: true,
          },
          {
            type: 'SELECT',
            label: '类型',
            fieldName: 'targetType',
            placeholder: '请选择',
            itemList: this.createDictList('2403'),
          },
          {
            type: 'SELECT',
            label: '车系名称',
            fieldName: 'seriesId',
            placeholder: '请选择',
            itemList: [],
          },
          {
            type: 'SELECT',
            label: 'C端战区',
            fieldName: 'areaId',
            placeholder: '请选择',
            itemList: [],
          },
          {
            type: 'SELECT',
            label: '省份',
            fieldName: 'provinceId',
            placeholder: '请选择',
            itemList: [],
            change: (value) => {
              this.initCity(value);
            },
          },
          {
            type: 'SELECT',
            label: '城市',
            fieldName: 'cityId',
            placeholder: '请选择',
            itemList: [],
            // change: (value) => {
            //   this.initTown(value)
            // },
          },
          {
            type: 'INPUT',
            label: '经销商代码',
            fieldName: 'dealerCode',
            placeholder: '请输入',
          },
          {
            type: 'INPUT',
            label: '经销商名称',
            fieldName: 'dealerName',
            placeholder: '请输入',
          },
          {
            type: 'SELECT',
            label: '状态',
            fieldName: 'status',
            placeholder: '请选择',
            itemList: this.createDictList('2402'),
          },
        ];
      },
      createdTable() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: (props) => {
              return <span>{props.row.index + 1}</span>;
            },
          },
          {
            title: '状态',
            dataIndex: 'status',
            sorter: true,
            filter: true,
            filterType: 'input',
            render: (props) => {
              //编码转汉字
              return <span>{this.createDictText(props.row.status, '2402')}</span>;
            },
          },
          {
            title: 'C端战区',
            dataIndex: 'areaId',
            sorter: true,
            filter: true,
            filterType: 'input',
            render: (props) => {
              return <span>{this.areaName(props.row.areaId)}</span>;
            },
          },
          {
            title: '省份',
            dataIndex: 'provinceName',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '城市',
            dataIndex: 'cityName',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '经销商代码',
            dataIndex: 'ownerCode',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '经销商名称',
            dataIndex: 'dealerName',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '类型',
            dataIndex: 'targetType',
            sorter: true,
            filter: true,
            filterType: 'input',
            render: (props) => {
              //编码转汉字
              return <span>{this.createDictText(props.row.targetType, '2403')}</span>;
            },
          },
          {
            title: '车系名称',
            dataIndex: 'seriesName',
            sorter: true,
            filter: true,
            filterType: 'input',
            // render: props => {    //编码转汉字
            //   return <span>{this.getSeriesName(props.row.seriesId)}</span>;
            // }
          },
          {
            title: '物料编码',
            dataIndex: 'productCode',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '指标月份',
            dataIndex: 'targetDate',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '任务数量',
            dataIndex: 'targetNum',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '下发日期',
            dataIndex: 'assignDate',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '下发人',
            dataIndex: 'assignPersonName',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
        ];
      },
    },
  };
</script>
